<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css" />
		<link rel="stylesheet" href="../../../css/mui2.css">
		<link rel="stylesheet" href="../../../css/mui.picker.min.css" />
		<script type="text/javascript" src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js"></script>
		<script type="text/javascript" src="../../../js/mui.picker.min.js"></script>
	</head>
	<style type="text/css">
		.mui-toast-container {
			width: 70%;
		}
		
		.mui-toast-container div {
			width: 100%;
			background-color: #666;
			opacity: 0.8;
		}
		
		input[type="text"] {
			height: 40px;
			border-color: greenyellow;
			border-radius: 10px;
		}
		
		.mui-popup-title {
			font-size: 16px;
			margin-bottom: 15px;
		}
		
		.timeId {
			height: 40px;
			border: 1px solid greenyellow;
			border-radius: 5px;
			line-height: 40px;
		}
		
		.mui-dtpicker-header button {
			width: initial;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">选择日期</h1>
		</header>
		<div class="mui-content" style="margin: 0 46px;">
			<p class="component-description" style="margin-top:3em;">快速选择</p>
			<div style="display:inline-flex; width:100%; padding-left:1px; padding-right:1px;">
				<button type="button" class="mui-btn day" data-id="today">今天</button>
				<button type="button" class="mui-btn day" data-id="yesterday">昨天</button>
				<button type="button" class="mui-btn day" data-id="thisweek">本周</button>
			</div>
			<div style="display:inline-flex; width:100%; padding-left:1px; padding-right:1px;padding-top: 15px;">
				<button type="button" class="mui-btn month" data-id="thisMouth">本月</button>
				<button type="button" class="mui-btn month" data-id="lastMouth">上月</button>
				<button type="button" class="mui-btn month" data-id="zi">自定义</button>
			</div>
		</div>

		<script>
			$(document).ready(function() {
				var data_type="";
				var startTime=endTime = "";
				mui("body").on("tap", "button[type='button']", function() { //点击了日期类别按钮
					data_type=$(this).attr("data-id");
					if($(this).attr("data-id") == "zi") { //点击了自定义
						mui.confirm("<p id='startTime' class='timeId'>请选择开始日期</p><p id='endTime' class='timeId'>请选择结束日期</p>", "请选择需要查询的日期", ["查询", "取消"], function() {}, "div");
					} else {
						mui.openWindow({
							url: "../../searchResult.html",
							id: "searchResult",
							extras: {
								dataId: $(this).attr("data-id")
							}
						})
					}
				})

				mui("body").on("tap", ".timeId", function() { //点击了日期输入框
					self=$(this);
					var today=new Date();
					var nowTime=today.getFullYear()+"-"+(today.getMonth()<9?"0"+""+(today.getMonth()+1):(today.getMonth()+1))+"-"+today.getDate()+" "+(((today.getHours()<10))?("0"+today.getHours()):today.getHours())+":"+today.getMinutes();
					console.log(nowTime);
					var dtpicker = new mui.DtPicker({
						"type": "datetime",
						"value": nowTime
					})
					dtpicker.show(function(e) {
						self.html(e.value);
						self.index()==0?startTime=self.html():endTime=self.html();
					})
				})

				mui("body").on("tap", ".mui-popup-button", function() {
					console.log(data_type);
					if ($(this).index()==0&&(startTime!=""||endTime!="")) {
						mui.openWindow({
							url: "../../searchResult.html",
							id: "searchResult",
							extras: {
								dataId: data_type,
								start_time:startTime+":00",
								end_time:endTime+":00"
							}
						})
					}else if($(this).index()==0&&startTime==""&&endTime==""){
						mui.toast('查询的日期不能为空！',{ duration:'long', type:'div' })
					}
				})

			})
		</script>
	</body>

</html>